<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>
    <style>
        #t1 #t2 {
            color: purple;
        }

        #t2 {
            color: blue;
        }

        /*(a,b,c) a:id选择器个数，b:类,伪类，属性 选择器个数，c:元素,伪元素选择器个数  ,别的选择器不参与运算*/
        /*一样的话看顺序,鼠标放上去,ide会显示这3个值Specificity */
        /*(0,2,1)*/
        .container span.slogan {
            color: red;
        }

        /*(0,1,3),1个伪类 :nth  3个元素div p span */
        div > p > span:nth-of-type(1) {
            color: green;
        }
        /*所有选择器打不过行内style,但是行内打不过!important,但这仅是加了!important的属性*/
        .slogan{
            color: orange !important;
        }
    </style>
</head>
<body>
<div class="container" id="t1">
    <p>
        <span class="slogan" id="t2">11111111111111</span>
        <span>222222222222啊</span>
    </p>
</div>
<img width="400px" src="./选择器优先级简单理解.png">
<img width="600px" src="./选择器优先级练习.png">
</body>
</html>